<!-- table首页 -->
<template>
  <div class="tabel-demo">
    <div v-show="!state.tableDemo2.isShowForm">
      <div class="header-button">
        <MyElButton @btnClick="handleAdd" :buttonText="'新增'"></MyElButton>
        <PageSearch
          :searchObject="state.searchObject"
          :searchConfig="state.searchConfig"
          @onSearch="onSearch"
        ></PageSearch>
      </div>
      <PageList
        v-model:pageSize="pageSize"
        v-model:currentPage="pageIndex"
        :total="total"
        @paginationFn="getListData"
      >
        <ProTable
          :loading="state.loading"
          :columns="state.tableColumns"
          stripe
          :processTableData="state.processTableData"
          :showCheckout="true"
        >
          <!-- 表格操作 -->
          <template #operation="slot">
            <el-button type="primary" link @click="editRow(slot.row.id)">编辑</el-button>
            <el-button type="danger" link @click="deleteRow(slot.row.id)">删除</el-button>
          </template>
          <!-- 图片插槽 -->
          <template #images="slot">
            <img :src="slot.row.img" />
          </template>
          <!-- 样式判断插槽 -->
          <template #xmStatus="slot">
            <div v-if="slot.row.xm_status === '开发中'" class="power-status power-status-success">
              开发中
            </div>
            <div
              v-else-if="slot.row.xm_status === '待开始'"
              class="power-status power-status-warning"
            >
              待开始
            </div>
            <div v-else class="power-status power-status-danger">已完结</div>
          </template>
        </ProTable>
      </PageList>
    </div>
    <AddFormPage
      ref="addFormPage"
      class="add-form-page"
      v-show="state.tableDemo2.isShowForm"
      @updateMyForm="updateMyForm"
      @submitForm="submitForm"
      @goBack="goBack"
    ></AddFormPage>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getList, getItem, updateItem, deleteItem } from '@/api/user'
import AddFormPage from '@/views/ComponentView/pageComp/tableDemo2/addFormPage.vue'
import { useCounterStore } from '@/stores/counter.js'
// import router from '@/router/index'
import stateData from '@/views/ComponentView/index.js'

const store = useCounterStore()
let pageSize = ref(12) // 单页容量
let pageIndex = ref(1) // 当前页码
let total = ref(0) // 总计数据量
const addFormPage = ref(null) // 获取form的dom节点
const state = reactive({
  ...stateData,
  // 配置可查询字段，key为table每列的key--tableColumns的prop
  searchObject: {
    qymc: '',
    xmmc: '',
    xm_status: ''
  },
  // 配置查询的slot类别及可查询的key，value为key值
  searchConfig: [
    { label: '企业名称', type: 'input', value: 'qymc' },
    {
      label: '选择启用禁用',
      type: 'select',
      value: 'xm_status',
      options: [
        { label: '待开始', value: '待开始' },
        { label: '开发中', value: '开发中' },
        { label: '已完结', value: '已完结' }
      ]
    },
    { label: '创建时间', type: 'date', value: 'createdate' }
  ],
  loading: false,
  tableColumns: [
    { type: 'index', label: '序号', width: '60' },
    { prop: 'qymc', label: '企业名称', width: '150' },
    { prop: 'xmmc', label: '项目名称', width: '150' },
    { prop: 'yxlhq', label: '项目意向落户区' },
    { prop: 'xm_status', label: '项目状态', type: 'slot', slot_name: 'xmStatus', width: '50' },
    { prop: 'reason', label: '申请原因' },
    { prop: 'content', label: '项目内容' },
    { prop: 'area', label: '申请地', width: '70' },
    { prop: 'operation', label: '操作', type: 'slot', slot_name: 'operation' }
  ],
  processTableData: [] // 表体数据
  // isShowForm: false // 控制form表单显隐
})

onMounted(() => {
  getListData()
})

/**
 * @description 获取表格数据
 */
const getListData = () => {
  state.loading = true
  let params = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value
  }
  getList(params).then(res => {
    console.log(res, 'res')
    const { records, code, total: count } = res.data
    if (!records && code !== 200) {
      return
    }
    state.processTableData = records
    total.value = count
    state.loading = false
  })
}

/**
 * @description table操作--新增
 */
const handleAdd = () => {
  addFormPage.value.updateMyForm({}) // 调用子组件updateMyForm方法，将form绑定值更新
  state.tableDemo2.isShowForm = true
}

/**
 * @description 提交表单，返回table页面，重新渲染数据
 */
const submitForm = () => {
  state.tableDemo2.isShowForm = false
  ElMessage.success('添加成功！')
  getListData()
}

/**
 * @description table操作--删除--打开弹窗，id传给dialog
 */
const deleteRow = id => {
  state.isShowDemo1Dialog = true
  deleteItem({ id }).then(res => {
    console.log('删除成功', res)
    if (res.data) {
      getListData()
      ElMessage.success('删除成功')
    }
  })
}

/**
 * @description table操作--查找
 */
const onSearch = () => {
  searchFilter(state.processTableData, state.searchObject)
}

/**
 * @description 根据key过滤表格中的值
 */
function searchFilter(tableData, val) {
  let arr = []
  if (val.qymc || val.xmmc || val.xm_status) {
    if (val.qymc) {
      arr = tableData.filter(value => {
        return value.qymc.indexOf(val.qymc) !== -1
      })
    }
    if (val.xm_status) {
      arr = tableData.filter(value => {
        return value.xm_status.indexOf(val.xm_status) !== -1
      })
    }
  } else {
    getListData()
  }
  state.processTableData = arr // 过滤后的值赋给表格
}

/**
 * @description table操作--编辑
 */
const editRow = id => {
  getItem({ id }).then(res => {
    const { data } = res.data
    addFormPage.value.updateMyForm(data) // 调用子组件updateMyForm方法，将form绑定值更新
  })
  getListData()
  state.tableDemo2.isShowForm = true
}

/**
 * @description form返回上一页，切换回table页面
 */
const goBack = () => {
  state.tableDemo2.isShowForm = false
}
</script>

<style lang="scss" scoped>
.tabel-demo {
  background: #ffffff;
}

.header-button {
  display: flex;
  flex-direction: row;
}

.power-status {
  height: 35px;
  padding: 4px 8px;
  box-sizing: border-box;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  border-radius: 5px;
  background: #f5fff6;
}
.power-status-success {
  color: #01a851;
  border: 1px solid #bcf3c4;
}
.power-status-warning {
  color: #409eff;
  border: 1px solid #b3d8ff;
}
.power-status-danger {
  color: #fe4d4f;
  border: 1px solid #fe4d4f;
}

.add-form-page {
}
</style>
